<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--微信支付页</title>
	<link rel="icon" href="/assets/img/favicon.ico">


	<link rel="stylesheet" type="text/css" href="css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
</head>

<body>

	<!--页面顶部白条条，由js动态加载-->
	<div id="payVm">
		<div class="top">
			<shortcut/>
		</div>

		<div class="cart py-container">
			<!--logoArea-->
			<div class="logoArea">
				<div class="fl logo">
					<span class="title">收银台</span>
				</div>
			</div>
			<!--主内容-->

			<a href="payfail.html">支付失败演示页</a>
			<a href="paysuccess.html">支付成功演示页</a>


			<div class="checkout py-container  pay">
				<div class="checkout-tit">
					<h4 class="fl tit-txt">
						<span class="success-icon"></span>
						<span class="success-info">订单提交成功，请您及时付款！订单号：56789065645</span>
					</h4>
					<span class="fr">
						<em class="sui-lead">应付金额：</em>
						<em class="orange money">￥17,654</em>元</span>
					<div class="clearfix"></div>
				</div>
				<div class="checkout-steps">
					<div class="fl weixin">微信支付</div>
					<div class="fl sao">
						<p class="red">二维码已过期，刷新页面重新获取二维码。</p>
						<div class="fl code">
							<div id="ewm"></div>
							<div class="saosao">
								<p>请使用微信扫一扫</p>
								<p>扫描二维码支付</p>
							</div>
						</div>
						<div class="fl phone">

						</div>

					</div>
					<div class="clearfix"></div>
					<p>
						<a href="pay.html" target="_blank">> 其他支付方式</a>
					</p>
				</div>
			</div>

		</div>
	</div>


	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->
	<script src="./js/vue/vue.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/common.js"></script>
	<script src="./js/qrcode.js"></script>
	<script>
		var payVm = new Vue({
			el:"#payVm",
			data() {
				return {

				}
			},
			components: {
				shortcut: () => import("./js/pages/shortcut.js")
			},
			created() {
				//现在跳转到支付页面，此时需要拿到地址栏中的订单编号
				//取到订单编号后，需要根据订单的编号生成微信付款连接
				//进而根据微信付款的连接生成二维码

				// 判断登录状态
				ly.http.get("/auth/verify").then(() => {
					// 获取订单编号
					this.orderId = ly.getUrlParam("orderId");
					// 获取请求链接
					ly.http.get("/order/order/url/" + this.orderId)
							.then(resp => {
								//成功拿到了微信付款连接


								//自动生成二维码
								new QRCode(document.getElementById("ewm"), {
									text: resp.data,//把响应的连接存入二维码
									width: 250,
									height: 250,
									colorDark: "#000000",
									colorLight: "#ffffff",
									correctLevel: QRCode.CorrectLevel.H
								});



								// 开启定时任务，查询付款状态
								const taskId = setInterval(() => {
									ly.http.get("/order/order/state/" + this.orderId)
											.then(resp => {
												debugger
												let i = resp.data;
												if (i === 1) {
													// 付款成功
													clearInterval(taskId);
													// 跳转到付款成功页
													location.href = "/paysuccess.html?orderId=" + this.orderId;
												} else if (i === 2) {
													// 付款失败
													clearInterval(taskId);
													// 跳转到付款失败页
													location.href = "/payfail.html";
												}
											})
								}, 3000);
							})
				}).catch(() => {
					// 未登录，跳转至登录页
					location.href = "/login.html?returnUrl=" + location.href;
				})
			}
		});
	</script>


	<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
	<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
	<script type="text/javascript" src="js/widget/nav.js"></script>
	<script type="text/javascript">
		$(function () {
			$("ul.payType li").click(function () {
				$(this).css("border", "2px solid #E4393C").siblings().css("border-color", "#ddd");
			})
		})
	</script>
</body>

</html>